<template>
	<view class="Global">


		<!-- 背景图片铺满 -->
		<!-- <image class="imagepage" src="/static/background@2x.png" mode=""></image> -->
		<bgImage></bgImage>
		<!-- <view class="personnel" :style="{'height':tarbarHeight+'px'}">
			<image @click="backOnClick" src="../../../static/left_arrow.png" class="backImg" mode=""></image>
			<text class="title">{{personnelInfo}}</text>
		</view> -->
		<MyNav :title="title" bgColor="" :backIcon="isback" id="main"></MyNav>


		<scroll-view scroll-y="true" class="ContentScroll" :style="'height:'+scrollViewHeight+'px'">
			<view>

				<view class="contentCenter">

					<view class="listContent">




						<view class="contentItem">

							<view class="contentItemTextLeftContent">
								<text class="contentItemTextLeft">工号</text>
								<text class="contentItemTextLeftStart">*</text>
							</view>
							<input @input="onInputAccount" class="contentItemTextRight" type="text" value=""
								placeholder-class="contentItemTextRight" placeholder="请输入" />

						</view>

						<view class="lineBg"></view>



						<view class="contentItem2">

							<view class="contentItemTextLeftContent">
								<text class="contentItemTextLeft">姓名</text>
								<text class="contentItemTextLeftStart">*</text>
							</view>
							<!-- <input class="contentItemTextRight" type="text" :value="item.Value" /> -->
							<input @input="onInputAccountName" class="contentItemTextRight" type="text" value=""
								placeholder-class="contentItemTextRight" placeholder="请输入" />
						</view>
						<view class="lineBg"></view>


						<view class="contentItem2">

							<view class="contentItemTextLeftContent">
								<text class="contentItemTextLeft">手机号码</text>
								<text class="contentItemTextLeftStart">*</text>
							</view>
							<!-- <input class="contentItemTextRight" type="text" :value="item.Value" /> -->
							<input @input="onInputAccountPhone" class="contentItemTextRight" type="text" value=""
								placeholder-class="contentItemTextRight" placeholder="请输入" />
						</view>
						<view class="lineBg"></view>



						<view class="contentItem2">

							<view class="contentItemTextLeftContent">
								<text class="contentItemTextLeft">登录密码</text>
								<text class="contentItemTextLeftStart">*</text>
							</view>
							<!-- <input class="contentItemTextRight" type="text" :value="item.Value" /> -->
							<input @input="onInputAccountPass" class="contentItemTextRight" type="text" value=""
								placeholder-class="contentItemTextRight" placeholder="请输入" />
						</view>

						<!-- <view class="lineBg"></view> -->
						<view class="contentItem2" @click="toChoose(query,2,true,'部门')">

							<view class="contentItemTextLeftContent">
								<text class="contentItemTextLeft">所属部门</text>
								<text class="contentItemTextLeftStart">*</text>
							</view>
							<!-- <input class="contentItemTextRight" type="text" :value="item.Value" /> -->
							<view class="contentItemTextLeftContentRight">
								<text class="contentItemTextLeftContentRightText">{{addUserData.deptName}}</text>
								<uni-icons class="contentItemTextLeftContentRightIcon" type="down"
									size="14"></uni-icons>
							</view>
						</view>



						<view class="contentsalaryContent">
							<text class="contentItemTextLeft">薪资设置</text>
<!--              <uni-data-checkbox style="margin-left: 50rpx;margin-top: 20rpx" mode="tag" multiple v-model="checkSalarys" :localdata="hobby" @change="checkboxChange"></uni-data-checkbox>-->
              <view class="contentsalaryContentBottom" >
                <view class="contentItemSalary" >

                  <view class="contentItemTextLeftContent">
                    <text class="contentItemTextLeft">基本工资</text>
                  </view>
                  <input @input="onInputBasicSalary" class="contentItemTextRight" type="text" value=""
                         placeholder-class="contentItemTextRight" placeholder="请输入" />
                </view>
              </view>
              <view class="contentsalaryContentBottom" >
                <view class="contentItemSalary" >

                  <view class="contentItemTextLeftContent">
                    <text class="contentItemTextLeft">计件</text>
                  </view>
                  <input @input="onInputPieceworks" class="contentItemTextRight" type="text" value=""
                         placeholder-class="contentItemTextRight" placeholder="请输入" />
                </view>
              </view>
              <view class="contentsalaryContentBottom" >
                <view class="contentItemSalary" >

                  <view class="contentItemTextLeftContent">
                    <text class="contentItemTextLeft">计时</text>
                  </view>
                  <input @input="onInputWorkingHours" class="contentItemTextRight" type="text" value=""
                         placeholder-class="contentItemTextRight" placeholder="请输入" />
                </view>
              </view>
              <view class="contentsalaryContentBottom" >
                <view class="contentItemSalary" >

                  <view class="contentItemTextLeftContent">
                    <text class="contentItemTextLeft">月薪</text>
                  </view>
                  <input @input="onInputMonthlyPay" class="contentItemTextRight" type="text" value=""
                         placeholder-class="contentItemTextRight" placeholder="请输入" />
                </view>
              </view>

						</view>
					</view>
				</view>

			</view>
		</scroll-view>
		<view class="loginContent" id="mainBottom">

			<button @click="AddData()" style="color:#ffffff" class="login" type="default">{{login}}</button>
		</view>


	</view>
</template>

<script>
	import stringUtil from '@/pages/common/stringUtil.js';
	import MyNav from '@/components/customnavbar.vue'
	import bgImage from '@/components/backgroundImage.vue'
	import {
		addUserManager,updateUserManager,
		addSalarManager
	} from '@/pages/api/api.js'
	export default {
		components: {
			MyNav,
			bgImage
		},
		data() {
			return {
				title: '新增',
				isback: true,

				personnelInfo: '新增',
				tops: 0,
				height: 0,
				tarbarHeight: 0,
				login: '确认',
				manualEntryIsAllowed: '允许手工入菲',
				onlyTheDefaultProcedureIsEntered: '只入默认工序',
				removePhenanthrene: '删除菲',

        checkSalarys: [],
        checkData: [],
        checkVale: '',
        hobby: [
          {
            text: '基本薪资',
            value: 'basic_salary'
          },
          {
            text: '计时',
            value: 'working_hours'
          },
          {
            text: '计件',
            value: 'pieceworks'
          },
          {
            text: '月薪',
            value: 'monthly_pay'
          }
        ],

				listData: [{
						title: '工号',
						Value: '',
						type: 0
					},
					{
						title: '姓名',
						Value: '',
						type: 0
					},
					{
						title: '手机号码',
						Value: '',
						type: 0
					},
					{
						title: '登录密码',
						Value: '',
						type: 0
					},
					{
						title: '所属部门',
						Value: '',
						type: 2
					},
					{
						title: '工价',
						Value: '',
						type: 2
					},
					{
						title: '工序1',
						Value: '',
						type: 2
					},
					{
						title: '工序2',
						Value: '',
						type: 2
					},
					{
						title: '工序3',
						Value: '',
						type: 2
					},
					{
						title: '入职日期',
						Value: '',
						type: 2
					}

				],


				addUserData: {
					deptId: '',
					deptName: '',
					userName: "",
					nickName: "",
					password: "",
					phonenumber: "",
					status: 0,
					"postIds": [],
					roleIds: [
						1839314863924305920
					],
					storeId: '',
					tenantId: ''
				},

				mainTop: '',
				bottomTop: '',
				scrollViewHeight: 0,
				userId: '',
        query: [],
				SalaryData: [
					// 基本工资
					{
						"amounts": 100,
						"remark": "",
						"salaryCategory": "basic_salary",


					},
					// 计时/小时
					{
						"amounts": 200,
						"remark": "",
						"salaryCategory": "working_hours",

					},
					// 计件
					{
						"amounts": 300,
						"remark": "",
						"salaryCategory": "pieceworks",

					},
					// 月薪
					{
						"amounts": 400,
						"remark": "",
						"salaryCategory": "monthly_pay",

					}
				]


			}
		},
    onShow() {
      //兼容小程序,获取选中的值
      var that = this
      uni.$on('globleEvent', function (res) {
        // console.log('3422222', res.listSizeData) //  为 B 页面传过来的值
        that.query = res.deptData
        console.log('query', that.query) //  为 B 页面传过来的值
        // 移除监听事件
        uni.$off('globleEvent');
      })
      if(this.query != null && this.query.length>0){
        console.log('this.query[0]',this.query[0])
        this.addUserData.deptId = this.query[0].id
        this.addUserData.deptName = this.query[0].label
        console.log('addUserData',this.addUserData)
        this.$forceUpdate()
      }

    },
		onReady() {
			// 获取距离顶部的距离
			let query = uni.createSelectorQuery().in(this);
			query.select('#main').boundingClientRect(data => {
				// console.log(data);
				this.mainTop = data.top

				// console.log('1底部距离', this.mainTop);

				// 在其他页面或组件中访问
				// const app = getApp();
				// this.scrollViewHeight = app.globalData.system.screenHeight - this.mainTop - app.globalData
				// 	.totalHeight


				/* console.log('获取距离',this.mainTop,this.scrollViewHeight);
				console.log('滚动距离',this.scrollViewHeight); */
			}).exec();

			query.select('#mainBottom').boundingClientRect(data => {
				this.bottomTop = data.top
				// console.log('2底部距离', this.bottomTop);

				this.scrollViewHeight = this.bottomTop - this.mainTop - 50
				// console.log('可滚动距离', this.scrollViewHeight);
			}).exec();



		},

		methods: {
      toChoose(item, type, isCheck = false ,title = '') {
        // #ifdef H5
        let items = encodeURIComponent(JSON.stringify(this.query));
        // #endif
        // #ifdef MP-QQ||MP-WEIXIN
        let items = JSON.stringify(this.query);
        // #endif
        uni.navigateTo({
          url: `/subPack/departmentManagement/departmentManagement/chooseDept?arr=${items}&type=${type}&isCheck=${isCheck}&title=${title}`
        })
      },
			// 获取编号输入框的值
			onInputAccount(e) {
				this.addUserData.userName = e.detail.value

			},
			onInputAccountName(e) {
				this.addUserData.nickName = e.detail.value

			},
			onInputAccountPhone(e) {
				this.addUserData.phonenumber = e.detail.value

			},
			onInputAccountPass(e) {
				this.addUserData.password = e.detail.value

			},
			onInputAccountDepartmen(e) {
				this.addUserData.deptId = e.detail.value

			},
      onInputBasicSalary(e) {
        this.addUserData.basicSalary = e.detail.value
      },
      onInputWorkingHours(e) {
        this.addUserData.workingHours = e.detail.value
      },
      onInputPieceworks(e) {
        this.addUserData.pieceworks = e.detail.value
      },
      onInputMonthlyPay(e) {
        this.addUserData.monthlyPay = e.detail.value
      },
			/* onInputAccountEmail(e){
				this.addUserData.email = e.detail.value
			}, */
      checkboxChange(e){
        console.log('checkSalarys',this.checkSalarys)
        console.log('eeeee',e)
        if(this.checkSalarys.length==0){
          this.checkVale = ''
        }
        if(this.checkSalarys.length==1){
          this.checkVale = this.checkSalarys[0]
        }
        if(this.checkSalarys.length>1){
          if(this.checkSalarys.length>this.checkData.length){
            let difference = this.checkSalarys.filter(x => !this.checkData.includes(x));
            console.log('difference',difference)
            this.checkVale = difference[0]
          }
          if(this.checkSalarys.length<this.checkData.length){
            this.checkVale = this.checkSalarys[this.checkSalarys.length-1]
          }
        }
        this.checkData = this.checkSalarys
      },
			backOnClick() {
				uni.navigateBack({
					delta: 1
				});
				console.log('点击返回');
			},
			// 新增数据
			AddData() {


				if(stringUtil.isEmpty(this.addUserData.userName)||
				stringUtil.isEmpty(this.addUserData.nickName)||
				stringUtil.isEmpty(this.addUserData.phonenumber)||
				stringUtil.isEmpty(this.addUserData.password)
				){
					return
				}
        this.addUserData.checkSalarys = this.checkSalarys
				const app = getApp();
				this.addUserData.storeId = app.globalData.storeId
				this.addUserData.tenantId = app.globalData.tenantId
        console.log('addUserData',this.addUserData)
				// 新增
        updateUserManager(this.addUserData).then((res) => {
					// console.log('新增数据', res);

					if (res.code == 200) {
						// 表示添加成功 则返回上一页

						this.backOnClick()

					}
					// 显示提示信息
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});

				}).catch((err) => {
					console.log('新增失败', err);
				});


				// this.AddSalary()
			},

			// 新增数据
			AddSalary(){

			const app = getApp();

			// 用户id
			this.userId = uni.getStorageSync('user').userId;
			this.SalaryData.forEach((item) => {
				this.$set(item, 'userId',this.userId )
				this.$set(item, 'storeId',app.globalData.storeId )
				this.$set(item, 'tenantId',app.globalData.tenantId )
			})






			// 新增
			addSalarManager(this.addUserData).then((res) => {
				// console.log('新增数据', res);

				if (res.code == 200) {
					// 表示添加成功 则返回上一页

					this.backOnClick()

				}
				// 显示提示信息
				uni.showToast({
					title: res.msg,
					icon: 'none'
				});

			}).catch((err) => {
				console.log('新增失败', err);
			});
		}

	}

	}
</script>

<style>
	.contentsalaryContentBottom {
		margin-top: 30rpx;
		width: 630rpx;
		height: 120rpx;
		background: #F5F7F9;
		border-radius: 20rpx;

		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;

		margin-left: 30rpx;

	}

	.contentsalaryContent {

		display: flex;
		justify-content: center;
		flex-direction: column;

		width: 100%;
	}

	.loginContent {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 750rpx;

		position: absolute;

		bottom: 30rpx;


	}

	.login {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 20rpx;
		width: 690rpx;
		height: 100rpx;
		background: linear-gradient(90deg, #45A8FF, #0AE1C6);
		border-radius: 20rpx;
		margin-bottom: 20rpx;


		font-weight: 400;
		font-size: 36rpx;
		color: #FFFFFF;
		text-align: center;
		font-weight: bold;

		margin-top: 60rpx;
		background: linear-gradient(90deg, #45A8FF, #0AE1C6);

	}


	.contentItem4 {
		margin-left: 20rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		background-color: bisque;
	}

	.labelContent {
		font-size: 20rpx;
		font-weight: 600;
	}

	.contentItemSalary {
		display: flex;
		align-items: center;
		flex-direction: row;
		justify-content: space-between;
		width: 100%;
		height: 120rpx;

		border-bottom: #EEE solid 1rpx;

	}

	.ContentScroll {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		width: 690rpx;

		border-radius: 30rpx;

		background: #FFFFFF;

		height: 900rpx;
	}

	.contentCenter {

		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		width: 690rpx;

		border-radius: 30rpx;

		background: #FFFFFF;
	}

	.listContent {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 690rpx;





	}

	.lineBg {
		width: 100%;
		height: 1rpx;
		background: #F9FCFF;
	}

	.Global {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 100%;

	}

	.contentItemTextRight {
		font-size: 28rpx;
		font-weight: 600;
		color: #666666;
		margin-right: 30rpx;
		width: 200rpx;
		text-align: right;
	}

	.contentItemTextLeftStart {
		color: red;
	}

	.contentItemRightContentImg {
		width: 20rpx;
		height: 10rpx;
		margin-left: 15rpx;
		margin-right: 15rpx;

	}

	.contentItemTextLeft {
		font-size: 28rpx;
		font-weight: 600;
		color: black;
		margin-left: 30rpx;
	}

	.contentItem2 {
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-direction: row;

		width: 690rpx;
		height: 120rpx;



	}

	.contentItem3 {
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-direction: row;

		width: 100%;
		height: 100rpx;



	}



	.contentItemRightContent {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	.contentItemTextLeftContentRightIcon {
		margin-right: 30rpx;
	}

	.contentItemTextLeftContentRightText {
		display: flex;
		margin-right: 30rpx;
		font-family: HarmonyOS Sans SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #666666;
		line-height: 120rpx;
	}

	.contentItemTextLeftContentRight {

		display: flex;
		align-items: center;

	}

	.contentItemTextLeftContent {

		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	.contentItem {

		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-direction: row;

		width: 690rpx;
		height: 120rpx;

		border-radius: 30rpx 30rpx 0 0;


	}
</style>
